<template>
  <view class="activity-container">
    <!-- 测试按钮 -->
    <view class="test-section">
      <button class="test-btn" @click="testClick">测试点击功能</button>
      <button class="test-btn" @click="testNavigation" style="margin-left: 20rpx;">测试跳转功能</button>
    </view>
    
    <!-- 活动列表 -->
    <view class="activity-list">
      <view 
        v-for="(activity, index) in activityList" 
        :key="activity.id"
        class="activity-card"
        :class="{ active: selectedActivityId === activity.id }"
        @tap="goToActivityDetail(activity.id)"
        @click="goToActivityDetail(activity.id)"
      >
        <!-- 活动标题 -->
        <view class="activity-title">{{ activity.title }}</view>
        
        <!-- 活动描述 -->
        <view class="activity-desc">{{ activity.description }}</view>
        
        <!-- 活动时间 -->
        <view class="activity-time">
          <text class="time-label">活动时间:</text>
          <text class="time-value">{{ formatTime(activity.startTime) }} - {{ formatTime(activity.endTime) }}</text>
        </view>
        
        <!-- 活动状态 -->
        <view class="activity-status">
          <text class="status-text" :class="activity.status">{{ getStatusText(activity.status) }}</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <uni-load-more status="loading" />
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && activityList.length === 0">
      <image src="/static/images/empty-activity.png" class="empty-image" />
      <view class="empty-text">暂无活动</view>
    </view>
  </view>
</template>

<script>
import activityApi from '@/api/activity'

export default {
  name: 'ActivityPage',
  data() {
    return {
      loading: false,
      activityList: [],
      selectedActivityId: null
    }
  },
  onLoad() {
    this.loadActivities()
  },
  onPullDownRefresh() {
    this.loadActivities()
  },
  methods: {
    // 加载活动列表
    async loadActivities() {
      this.loading = true
      try {
        const response = await activityApi.getActivityList()
        console.log('活动列表响应:', response)
        
        this.activityList = response.data || []
        console.log('活动列表数据:', this.activityList)
        
        if (this.activityList.length > 0) {
          this.selectedActivityId = this.activityList[0].id
          console.log('设置默认选中活动ID:', this.selectedActivityId)
        }
      } catch (error) {
        console.error('加载活动列表失败:', error)
        uni.showToast({
          title: '加载活动列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      return `${month}-${day} ${hour}:${minute}`
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'active': '进行中',
        'upcoming': '即将开始',
        'ended': '已结束'
      }
      return statusMap[status] || '未知'
    },

    // 跳转到活动详情
    goToActivityDetail(activityId) {
      console.log('=== 点击事件触发 ===')
      console.log('活动ID:', activityId)
      
      // 先测试基本的点击功能
      uni.showToast({
        title: `点击了活动${activityId}`,
        icon: 'success',
        duration: 2000
      })
      
      // 延迟跳转，让用户看到提示
      setTimeout(() => {
        console.log('准备跳转到详情页...')
        
        // 使用更简单的跳转方式
        try {
          uni.navigateTo({
            url: `/pages/activity/detail?id=${activityId}`
          })
        } catch (error) {
          console.error('跳转异常:', error)
          uni.showToast({
            title: '跳转异常: ' + error.message,
            icon: 'none',
            duration: 3000
          })
        }
      }, 1000)
    },

    // 测试点击功能
    testClick() {
      console.log('测试按钮被点击')
      uni.showToast({
        title: '测试按钮点击成功',
        icon: 'success',
        duration: 2000
      })
    },

    // 测试跳转功能
    testNavigation() {
      console.log('测试跳转功能被点击')
      uni.showToast({
        title: '测试跳转功能点击成功',
        icon: 'success',
        duration: 2000
      })
      // 延迟跳转，让用户看到提示
      setTimeout(() => {
        try {
          uni.navigateTo({
            url: '/pages/activity/detail?id=1'
          })
        } catch (error) {
          console.error('跳转异常:', error)
          uni.showToast({
            title: '跳转异常: ' + error.message,
            icon: 'none',
            duration: 3000
          })
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.test-section {
  margin-bottom: 20rpx;
  text-align: center;
}

.test-btn {
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  
  &.active {
    border: 3rpx solid #ff4757;
  }
  
  &:active {
    transform: scale(0.98);
    background: #f8f9fa;
  }
}

.activity-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.activity-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.activity-time {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  
  .time-label {
    font-size: 24rpx;
    color: #999;
    margin-right: 8rpx;
  }
  
  .time-value {
    font-size: 24rpx;
    color: #666;
  }
}

.activity-status {
  display: flex;
  justify-content: flex-end;
  
  .status-text {
    font-size: 22rpx;
    padding: 6rpx 12rpx;
    border-radius: 12rpx;
    
    &.active {
      background: #e8f5e8;
      color: #52c41a;
    }
    
    &.upcoming {
      background: #fff7e6;
      color: #fa8c16;
    }
    
    &.ended {
      background: #f5f5f5;
      color: #999;
    }
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 